<template>
	<view>
		<!-- <hx-navbar title="收货地址" :back="true" :fixed="true" height="88rpx"></hx-navbar> -->
		<view class="tp-w690">
			<!-- 联系人 -->
			<view class="cell-item tp-h88 tp-fxc tp-br8">
				<text>联系人</text>
				<view class="input">
					<input type="text" v-model="userName" placeholder="请输入联系人姓名" />
				</view>
			</view>
			<!-- 联系电话 -->
			<view class="cell-item tp-h88 tp-fxc tp-br8">
				<text>联系电话</text>
				<view class="input">
					<input type="number" v-model="userPhone" maxlength="11" placeholder="请输入联系人电话" />
				</view>
			</view>
			<!-- 所在地区 -->
			<!-- #ifdef MP-WEIXIN -->
			<picker mode="region" @change="bindPickerChange">
				<view class="cell-item tp-h88 tp-fxc tp-br8">
					<text>所在地区</text>
					<view class="input">
						<input type="text" disabled :value="addressName" placeholder="请选择" />
					</view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="cell-item tp-h88 tp-fxc tp-br8" @click="showMulLinkageThreePicker">
				<text>所在地区</text>
				<view class="input">
					<input type="text" disabled :value="addressName" placeholder="请选择" />
				</view>
			</view>
			<!-- #endif -->
			<!-- 详细地址 -->
			<view class="address-container tp-br8 tp-fyl">
				<text class="tit">详细地址</text>
				<textarea class="address" v-model="addressDetail" placeholder="请输入详细地址" />
				</view>
		</view>
		<button class="tp-btn-h88 tp-fcF" @click="submitAddress">确定</button>
		<!-- #ifdef H5 -->
		<!-- 三级城市联动选择器 -->
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'; // 三级城市选择联动
	import cityData from '@/common/city.data.js';
	// #endif
	export default {
		components: {
			// #ifdef H5
			mpvueCityPicker
			// #endif
		},
		data() {
			return {
				requestType: '', // 请求类型，判断是新增地址还是编辑地址
				amapPlugin: null,
				key: '4a6ba409d173f16460d07ddfaf5f1759',  
				addressName: '', // 地址全称
				addressDetail: '', // 详细地址
				userName: '', // 用户名
				userPhone: '', // 用户手机号
				aid: '',
				is_ture: 1,	// 是否是默认: 0默认
				addressObj: { // 地址 省|市|区
					province: '', // 省
					city: '', // 市
					district: '', // 区
					add_id: '', // 要修改的地址id
				},
				// #ifdef H5
				// 三级联动
				pickerText: '', // 三级联动得到的值
				pickerViewText: {}, // 页面需要的值 
				province: '', // 省
				city: '', // 市
				area: '', // 区
				mulLinkageTwoPicker: cityData, // 导入的数据
				cityPickerValueDefault: [0, 0, 1], // 三级联动选取的值
				themeColor: '#007AFF', // 确定的主题色
				// #endif
				isbtn: true, //方多次点击 
			};
		},
		
		onLoad(opt) {
			console.log(opt);
			try {
				if(opt.obj) {
					const obj = JSON.parse(opt.obj)
					this.aid = obj.id
					this.userName = obj.name;
					this.userPhone = obj.phone;
					this.province = obj.province;
					this.city = obj.city;
					this.area = obj.area;
					this.addressObj.province = obj.province;
					this.addressObj.city = obj.city;
					this.addressObj.area = obj.area;
					this.addressDetail = obj.address;
					this.addressName = obj.province + obj.city + obj.area;
					this.is_ture = obj.status;
				}
			} catch(e) {
				console.log('地址信息错误');
			}
		},
		
		methods: {
			// 新增和修改收货地址地址
			getList11() {
				uni.request({
					url:'http://33445y62c5.wicp.vip/front/product/addAndUpdateAddress',
					method:'POST',
					header: {
						token: this.getToken
					},
					data: {
						id: '', // 主键(新增传id,修改传id)
						name: '', // 收件人姓名
						phone: '', // 收件人电话
						province: '', // 省
						city: '', // 市
						area: '', // 区
						address: '', // 详细地址
						status: '', // 默认地址(0是,1否)
					},
					success: (result) => {
						console.log(result);
						if(result.data.code === 200) {
							// this.grids = result.data.data;
						}
					}
				})
			},
			// #ifdef H5
			// 取消时的停靠的数据,下次打开在这个位置
			onCancel(e) {
				console.log(e)
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			// 处理联动数据
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				this.pickerViewText = JSON.parse(this.pickerText)
				let str = this.pickerViewText.label.split('-')
				this.addressObj.province = str[0]
				this.addressObj.city = str[1]
				this.addressObj.district = str[2]
				this.addressName = this.addressObj.province  + this.addressObj.city  + this.addressObj.district
				this.$forceUpdate()
			},
			// #endif
			
			// #ifdef MP-WEIXIN
			// 选择城市
			bindPickerChange(e) {
				console.log(e);
				this.addressObj.province = this.province = e.detail.value[0]
				this.addressObj.city = this.city = e.detail.value[1]
				this.addressObj.district = this.area = e.detail.value[2]
				this.addressName = this.addressObj.province  + this.addressObj.city  + this.addressObj.district
				this.$forceUpdate()
			},
			// #endif
			
			// 提交地址信息  添加收货地址
			async submitAddress() { 
				if(!this.isbtn){
					return
				}
				if (!this.userName) {
					return uni.showToast({
						icon: 'none',
						title: '请输入联系人姓名'
					})
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userPhone)) {
					return uni.showToast({
						icon: 'none',
						title: '请检查联系人电话'
					})
				}
				if (!this.province) {
					return uni.showToast({
						icon: 'none',
						title: '请选择所在地区'
					})
				}
				if (!this.addressDetail) {
					return uni.showToast({
						icon: 'none',
						title: '请输入详细地址'
					})
				}
				const { province, city, district, add_id, is_ture} = this.addressObj
				const updata = {
					name: this.userName,
					phone: this.userPhone,
					province: this.province,
					city: this.city,
					area: this.area,
					address: this.addressDetail,
					status: this.is_ture
				}
				if(this.aid) updata.id = this.aid
					this.isbtn = false
				let res = await this.$http.post(this.$api.user_address_4, updata)
				if (res.code == 200) {
					uni.showToast({ 
						title: res.msg,
						icon:'none'
					});
					const lastpath = this.getLastPagePath()
					console.log('上一页',lastpath);
					// 商城订单添加地址
					if(
						lastpath === 'pagesShop/order/submit'  
						|| lastpath === 'pagesShop/order/ms_submit' 
						|| lastpath === 'pagesShop/order/tg_submit' 
						|| lastpath === 'pagesShop/order/jifenSubmit'
						|| lastpath === 'pagesShop/details/kj_details'
					) {
						updata.id = res.data
						uni.$emit('add-address',updata)
					}
					// 购物车订单添加地址
					if(lastpath === 'pagesShop/list/trolley') {
						updata.id = res.data
						uni.$emit('add-address-trolley',updata)
					}
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
						this.addressName = this.addressDetail = this.userName = this.userPhone = ''
						this.isbtn = true
					}, 1500)
				}
				
			},
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel(); // picker废除 性能优化
				return true;
			}
		},
		
	}
</script>

<style lang="scss" scoped>
.cell-item {
	background-color: #FFF;
	padding: 0 22rpx;
	font-size: 30rpx;
	margin-top: 20rpx;
	.input {
		flex: 1;
		text-align: right;
	}
}
.address-container {
	padding: 20rpx;
	background-color: #FFF;
	height: 206rpx;
	margin-top: 20rpx;
	overflow: hidden;
	font-size: 30rpx;
	.tit {
		height: 60rpx;
		line-height: 60rpx;
	}
	.address {
		flex: 1;
	}
}
.tp-btn-h88 {
	margin-top: 160rpx;
	background-color: $tc;
	width: 600rpx;
}

</style>
